<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">常用配置项</router-link> |
      <router-link to="/about">指令</router-link>|
      <router-link to="/cate">路由</router-link>|
      <router-link to="/fu">父子传参</router-link>|
      <router-link to="/music">ref和生命周期</router-link>|
      <router-link to="/some">定义指令过滤器动画，动态组件</router-link>|
      <router-link to="/xiu">修饰符</router-link>|
      <router-link to="/slot">插槽,混入</router-link>|
      <router-link to="/every">$set,$nextick,render,observeable</router-link>|
      <router-link to="/vuex">vuex,$parnet,$children,provide,inject</router-link
      >| <router-link to="/option">$root,$option,$attr,$listeners</router-link>|
    </div>
    <!-- exclude="[cate,cart]" include="[list,home]" -->
    <!-- exclude 不缓存的组件 -->
    <!-- include 需要的缓存的组件 -->
    <!-- 需要缓存的组件 放到keepAlive -->
    <keep-alive>
      <!-- 缓存了fu组件 -->
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
